import createApp from './app';

// export default ()=>{
//     const {app} = createApp();
//     return app; // 每次都是一个新的  只是产生一个实例 服务端根据实例 创建字符串
// } 


// 此方法是服务端运行的
/* 
    服务端渲染会先拿到路径，先在服务端渲染好对应的页面，然后再返回客户端 ===>>>> 刷新时
    客户端切换还是用的浏览器模式
*/
export default (context)=>{ // context.url 这里包含着当前访问服务端的路径
    return new Promise((resolve,reject)=>{
        const {app,router,store} = createApp();

        router.push(context.url); // 默认跳转到路径里，有异步组件

        router.onReady(()=>{ // 等待所有异步组件都加载完成

            const matchComponents = router.getMatchedComponents(); // 获取匹配到的组件
            if(matchComponents.length > 0){ // 匹配到路由了
                // 调用组件对应的asyncData
                Promise.all(matchComponents.map(component=>{
                    // 需要所有的asyncdata方法执行完毕后 才会响应结果
                    if(component.asyncData){
                        // 返回的是promise
                        return component.asyncData(store);
                    }
                })).then(()=>{
                    // 服务端执行完毕后 渲染的是正常的，但是前端的vuex是老数据
                    // 需要将后端的数据同步在前端的vuex中
                    // vue-server-renderer帮实现的
                    // 自动把结果放window上，window.__INITIAL_STATE__ = store.state
                    context.state = store.state;// 将状态放到上下文中，会自动给当前页面增加window属性

                    resolve(app)// 每次都是一个新的  只是产生一个实例 服务端根据实例 创建字符串 
                },reject)
                
            }else{
                reject({code:404});  // 没有匹配到路由
            }

            
        },reject)
    
        // return app; 
    })
} 


